<script setup lang="ts">
import type { Props } from './type.d'
// ------------------use------------------
// #region
withDefaults(defineProps<Props>(), {
  offset: 20,
  position: 'left',
  collapsedWidth: 0,
})
const emits = defineEmits(['update:value'])
// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const panelRef = ref<HTMLElement>()
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region

// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
function handleChange(bol: boolean) {
  emits('update:value', bol)
}
// #endregion
</script>

<template>
  <div
    ref="panelRef"
    class="height-fill flex-incompressible b-panel border-box relative"
    :class="{
      close: !value,
    }"
    :style="{
      '--panel-min-width': `${collapsedWidth}px`,
    }"
  >
    <div
      class="height-fill width-fill overflow panel-container"
    >
      <slot />
    </div>
    <b-fold
      display-animation
      :value="value"
      :offset="offset"
      :position="position === 'left' ? 'right' : 'left'"
      :target="() => panelRef"
      @change="handleChange"
    />
  </div>
</template>

<style lang="scss" scoped>
.b-panel {
  --panel-width: 200px;
  --panel-max-width: var(--panel-width);
  --panel-min-width: 0px;
  flex: 0 0 auto;
  width: var(--panel-width);
  max-width: var(--panel-max-width);
  transition: color 0.3s var(--motion-bezier),
    border-color 0.3s var(--motion-bezier),
    min-width 0.3s var(--motion-bezier),
    max-width 0.3s var(--motion-bezier),
    transform 0.3s var(--motion-bezier),
    margin 0.3s var(--motion-bezier),
    background-color 0.3s var(--motion-bezier);
  &.close {
    --panel-max-width: var(--panel-min-width);
  }
  &-container {
    white-space: nowrap;
  }
}
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
